<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>恩恩猴子馆开业了</h1>
			<p>
				<router-link to="/long">长臂猿</router-link>
				<router-link to="/golden">金丝猴</router-link>
				<router-view></router-view>
			</p>
		</div>
		<template id="longTem">
			<div>
				<h1>这是一个长臂猿</h1>
				<img src="./images/1.jpg" />
			</div>
		</template>
		<template id="goldenTem">
			<div>
				<h1>这是一个金丝猴</h1>
				<img src="./images/2.jpg" />
				<h2>
					<router-link to="/golden/one">老大</router-link>
					<router-link to="/golden/two">老二</router-link>
					<router-view></router-view>
				</h2>
			</div>
		</template>
		<template id="oneTem">
			<div>
				<h1>这是一个金丝猴的好大儿</h1>
			</div>
		</template>
		<template id="twoTem">
			<div>
				<h1>这是一个金丝猴的好二儿</h1>
			</div>
		</template>
		<script>
		let longCom = {
			template : "#longTem"
		}
		let goldenCom = {
			template : "#goldenTem"
		}
		let oneCom = {
			template :"#oneTem"
		}
		let twoCom = {
			template : "#twoTem"
		}
		/**
		 * 如果需要在跟标签中跳转,则写到router根目录下
		 * 如果需要进行父子的嵌套,则应该使用children属性
		 * 如果使用children属性,则在自身的router-view展现数据
		 */
		let router = new VueRouter({
			routes:[
				//当用户访问根目录(/目录)时  自动重定向到指定位置
				{path:"/",redirect:"/golden"}
				{path:"/long",component:longCom},
				{path:"/golden",component:goldenCom,
					children:[
						{path:"/golden/one",component:oneCom},
						{path:"/golden/two",component:twoCom}
					]
				},
			]
		})
			const app = new Vue({
					el : "#app",
					router
				})
		</script>
	</body>
</html>
